<template>
  <div class='container app-container'>
    <el-card class="box-card">
      <!-- 顶层表单 -->
      <div>
        <el-form :model="params" ref="params">
          <div class="filter-container">
            <el-row :gutter="24">
              <el-col :span="18" class="myStyle" style="display:table">
                <el-form-item label="" prop="tags" style="font-weight: 800;">
                  学科名称
                  <el-input
                    style="width:224px;margin-top: 7px;margin-left: 10px;"
                    placeholder="请输入"
                    class="filter-item"
                    v-model="searchBar"
                  ></el-input>
                  <el-button
                    style="margin-left:10px"
                    size="medium  "
                    @click="empty"
                  >清除</el-button>
                  <el-button
                    size="medium "
                    type="primary"
                    @click="hSearch"
                  >搜索</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    class="filter-item fr"
                    size="small"
                    style="margin-left: 10px;"
                    @click="hAddSub"
                    type="success"
                    icon="el-icon-edit"
                  >新增学科</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <!-- total信息栏 -->
      <div>
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          show-icon>
        </el-alert>
      </div>
      <br>
      <!-- 学科列表 -->
      <el-table
        :data="subList"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        fit
        highlight-current-row
        style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          label="序号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="subjectName"
          label="学科名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="creatorID"
          label="创建者">
        </el-table-column>
        <el-table-column
          align="center"
          prop="addDate"
          label="创建日期">
          <template slot-scope="scope">
            {{scope.row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="isFrontDisplay"
          label="前台是否显示">
        </el-table-column>
        <el-table-column
          align="center"
          prop="twoLevelDirectory"
          label="二级目录">
        </el-table-column>
        <el-table-column
          align="center"
          prop="tags"
          label="标签">
        </el-table-column>
        <el-table-column
          align="center"
          prop="totals"
          label="题目数量">
        </el-table-column>
        <el-table-column
          align="center"
          :fixed="false"
          label="操作"
          width="300">
          <template slot-scope="scope">
            <el-button @click="hClassify(scope.row)" type="text" size="small">学科分类</el-button>
            <el-button type="text" size="small" @click="hSubTags(scope.row)">学科标签</el-button>
            <el-button type="text" size="small" @click="hModify(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="hDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <div class="pages">
          <el-pagination
            background
            @size-change="hSizeChange"
            @current-change="hCurrentChange"
            :current-page="Number(params.page)"
            :total="Number(total)"
            :page-size="Number(params.pagesize)"
            :page-sizes="[10,20,30, 50]"
            layout="sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
      <!-- 新增标签弹层 -->
      <Show
      ref="editSub"
      :subject="curSub"
      class="ShowSize"
      @modified = "getSubList"
      @added = "getSubList"
      ></Show>
    </el-card>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
import Show from './../components/subjects-add'
export default {
  name: 'Subject',
  components: {
    Show
  },
  data () {
    return {
      // 弹窗出显示当前学科
      curSub: {
        isFrontDisplay: false,
        subjectName: '',
        id: ''
      },
      total: null,
      searchBar: '',
      listLoading: false,
      // 学科列表内容
      subList: [],
      // 查询参数
      params: {
        page: 1,
        pagesize: 10
      }
    }
  },
  created () {
    this.getSubList()
  },
  methods: {
    // 请求学科列表
    async getSubList (data) {
      try {
        this.listLoading = true
        const res = await list(data)
        this.subList = res.data.items
        console.log('loglog', this.subList)
        this.subList.forEach(element => {
          element.isFrontDisplay = element.isFrontDisplay ? '是' : '否'
        })
        this.listLoading = false
        this.total = res.data.counts
      } catch (err) {
        console.log(err)
      }
    },
    // 学科分类事件
    hClassify (row) {
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 学科标签事件
    hSubTags (row) {
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 删除事件
    hDel (row) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', { type: 'warning' })
        .then(async () => {
          try {
            const res = await remove({ id: row.id })
            console.log(res, 'res')
            this.getSubList()
          } catch (err) {
            console.log(err)
            this.$message.error('删除失败!')
          }
        }).catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 搜索按钮事件
    hSearch () {
      const data = {
        page: this.params.page,
        pagesize: this.params.pagesize,
        subjectName: this.searchBar
      }
      this.getSubList(data)
    },
    // 清空按钮事件
    empty () {
      this.searchBar = ''
      this.getSubList()
    },
    // 每页显示信息条数
    hSizeChange (val) {
      this.params.pagesize = val
      if (this.params.page === 1) {
        this.getSubList(this.params)
      }
    },
    // 进入某一页
    hCurrentChange (val) {
      this.params.page = val
      const data = {
        page: this.params.page,
        pagesize: this.params.pagesize,
        subjectName: this.searchBar
      }
      this.getSubList(data)
    },
    // 添加事件
    hAddSub () {
      this.$refs.editSub.dialogShow()
      this.curSub.subjectName = ''
      this.curSub.id = null
      this.curSub.isFrontDisplay = false
    },
    // 修改事件
    hModify (curRow) {
      this.$refs.editSub.dialogShow()
      this.curSub.subjectName = curRow.subjectName
      this.curSub.id = curRow.id
      this.curSub.isFrontDisplay = !!curRow.isFrontDisplay
    }
  }
}
</script>

<style scoped>
  .alert {
    margin: 10px 0px;
  }
  .pagination {
    margin-top: 10px;
  }
  .pagination {
    overflow: hidden;
  }
  .pages {
    float: right;
  }
  .add-form /deep/ .el-dialog__wrapper .el-dialog {
    width: 25%;
  }
  .box-card {
    width: 100%;
  }
  .el-form-item--medium {
    margin-bottom: 0;
  }
  .ShowSize .el-Show{
    width: 25%!important;
  }
  .el-switch.is-checked .el-switch__core {
  border-color: #13ce66;
  background-color: #13ce66;
}
</style>
